<template>
    <view class="page">
        <view class="title">常见问题</view>
        <view class="container">
            <view class="item" v-for="(item, i) in list" :key="i">
                <view class="item-q">{{ item.Q }}</view>
                <view class="item-a">{{ item.A }}</view>
            </view>
        </view>
        <view class="end">以上问题最终解释权归云图所有</view>
    </view>
</template>

<script setup>
import {
    onMounted,
    ref
} from 'vue';
const list = ref([])

onMounted(() => {
    list.value = [{
        Q: "Q: 购买后如何获取点数?",
        A: "A: 根据购买的套餐,在Pro会员有效期内,每日0时,点数自动回复至每日初始值。"
    },
    {
        Q: "Q: 生成图片是否可以商用及水印问题?",
        A: "A: AI创作生成的内容均带有水印,成为Pro会员后下载的自行生成图片将全部去除水印。 无水印图像可用于商业用途,若商业使用无水印图像时出现一切法律风险,将有用户自行承担,本服务平台不拥有该图像的知识产权及其 上的相关权益且不对此承担任何责任。"
    },
    {
        Q: "Q: 购买后如何获取点数?",
        A: "A: 根据购买的套餐,在Pro会员有效期内,每日0时,点数自动回复至每日初始值。"
    },
    {
        Q: "Q: 生成图片是否可以商用及水印问题?",
        A: "A: A: AI创作生成的内容均带有水印,成为Pro会员后下载的自行生成图片将全部去除水印。无水印图像可用于商业用途,若商业使用无水印图像时出现一切法律风险,将有用户自行承担,本服务平台不拥有该图像的知识产权及其 上的相关权益且不对此承担任何责任。"
    }
    ]
})
</script>

<style lang="scss">
.title {
    font-size: 28rpx;
    font-weight: 500;
    color: #fff;
    height: 30rpx;
    line-height: 30rpx;
    margin-bottom: 40rpx;
}

.item {
    margin-bottom: 60rpx;

    .item-q {
        color: #FFF;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 40rpx;
    }

    .item-a {
        color: #999;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 40rpx;
    }
}

.end {
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22rpx;
    border-top: 2rpx solid #191919;
    color: #999;
    position: fixed;
    left: 0;
    bottom: 0;
}
</style>